<template>
    <div>
        <cvue-dialog
            :dialogVisible="selectTeamVisible"
            title="请选择要下发数据的人员分组"
            :isShowFoot="false"
            @handleOpen="openDialog"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div  slot="dialogBody">
           
                     <el-table
                        ref="teamTable"
                        :data="groupList"
                        tooltip-effect="dark"
                        style="width: 100%"
                         @selection-change="selectionChange"
                        @row-click="rowClick"
                        >
                        <el-table-column
                        type="selection"
                        width="55">
                        </el-table-column>
                        <el-table-column
                        label="组名"
                         prop="groupName"
                        width="120">
                      
                        </el-table-column>
                        <el-table-column
                        prop="userCount"
                        label="人数"
                        width="120">
                        </el-table-column>
                       
                    </el-table>
                <div class="clear"></div>
                <div class="oper-p">
                     <el-button @click="toGroup">去设置分组</el-button>
                     <el-button @click="refresh" type="primary">刷新分组</el-button>
                     <el-button @click="next" type="success">下一步</el-button>
                </div>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
export default {
    components: {
        cvueDialog
    },
    computed: {
        selectTeamVisible () {
            return this.$store.state.dorm.selectTeamVisible
        },
        groupTree () {
          return this.$store.state.group.groupTree
        },
        groupList () {
          if (this.groupTree.length > 0) {
            return this.groupTree[0].children
          } else {
            return []
          }
        },
        curDorm () {
          return this.$store.state.dorm.curDorm
        }, 
        schoolId () {
          return this.$store.state.common.cookiesObj.schoolId
        }
    },
    data () {
        return {
        
        }
    },
    methods: {
       
        openDialog () {
          // this.$refs.teamTable.clearSelection()
           this.getList()
        },
        confirmDialog () {
             this.closeDialog()
             this.$store.state.dorm.selectDeviceVisible = true
        },
        closeDialog () {
            this.$store.state.dorm.selectTeamVisible = false
        },
         selectionChange (val) {
           console.log(val)
           this.$store.state.group.selectedGroup = val
        },
       
        rowClick (row, column) {
          this.$refs.teamTable.toggleRowSelection(row)
        },
        getList () {
           var params = {
              DormitoryId: this.curDorm.id,
              SchoolId: this.schoolId,
              PageNum: 1,
              PageSize: 300
            }
            this.$store.dispatch('group/getGroupList', params)
        },
        toGroup () {
          this.$store.state.dorm.selectTeamVisible = false
          this.$store.state.dorm.groupVisible = true
        },
        refresh () {
          this.getList()
        },
        next () {
          if (this.$store.state.group.selectedGroup.length == 0) {
            this.$message.error('请选择分组')
            return
          }
           this.$store.state.dorm.selectTeamVisible = false
           this.$store.state.dorm.selectDeviceVisible = true
        }
    }
}
</script>
<style scoped>
.left-con{float: left;width: 30%;}
.right-con{float: left;width: 70%;}
.clear{clear: both;}
.oper-p{text-align: center; padding: 20px 0;}
</style>
